<template>
  <div id="echarts1"> 
   
   <div class="con">
         <div class="top">
             <div class="top_item" style="flex: 1;">
                 <img class="top_img" src="@/assets/images/echarts_tb4.png" />
                 预约情况
             </div>
             <div class="top_item" >
                 <div class="see_but" @click="go_but()">查看详情</div>
             </div>
            
         </div>
         <div class="box">
              <div class="top_item" style="justify-content: flex-end;">
                 <div class="top_item_but" :class="select_id==1 ? 'active1' : ''" @click="select_but(1)">当月</div>
                 <div class="top_item_but" :class="select_id==2 ? 'active1' : ''"  @click="select_but(2)">当周</div>
             </div>
              <div class="box_left">
                 <div v-for="(item,index) in select_data" :key="index" class="box_left_item" 
                 @click="box_left_but(item.maid,index)" 
                 :class="box_left_id==index ? 'box_left_active' : ''">
                     <img v-if="index == 0" class="box_left_item_img" src="@/assets/images/zy1.png" />
                     <img v-if="index == 1" class="box_left_item_img" src="@/assets/images/zy2.png" />
                     <img v-if="index == 2" class="box_left_item_img" src="@/assets/images/zy3.png" />
                     <img v-if="index == 3" class="box_left_item_img" src="@/assets/images/zy4.png" />
                     <img v-if="index == 4" class="box_left_item_img" src="@/assets/images/zy5.png" />
                      {{item.title}}
                </div>
               
             </div>
              <div id="main1" style="width:100%;height:300px;"></div>
         </div>
   </div>

</div>
</template>

<script>

export default {
   name: 'echarts1',
  data () {
    return {
        select_data:[],
        box_left_id:0,
        my_maid:'',
        select_id:2,
        type:2,  //type  1-当月  2-当周
        x_data:[],
        y_data:[],
        month:[],
        monthdata:[],
        week:['周一','周二','周三','周四','周五','周六','周天'],
        weekdata:[],
    }
  },
   components:{

  },
  created(){
    this.list_zy()  
    this.x_data = this.week
    this.y_data = this.weekdata 
    // this.x_data = this.month
    // this.y_data = this.monthdata     
  },
  mounted (){
     this.mGetDate()
  },
  methods: {
     list_zy(){
      this.post("/manor/manorOption", {
       }).then(res => { 
           this.select_data = res.result  
           this.my_maid = res.result[0].maid 
           this.list_fun()                       
       })
    },
    list_fun(){
    
         this.post("/whole/appointmentLineChart", {
             type:this.type,
             maid:this.my_maid
	        }).then(res => {
              
              for(let item of res.message) {
                    if(this.type == 1){
                          this.monthdata.push(item.num) 
                    }else if(this.type == 2){
                          this.weekdata.push(item.num) 
                    }
              }

              this.myEcharts();

              //console.log(res,"ffff")
         })
    },

    select_but(index){
         this.select_id = index
         if(index == 1){
            this.type = 1
            this.monthdata = []
            this.x_data = this.month
            this.y_data = this.monthdata
            this.list_fun()     
         }else if(index == 2){
            this.type = 2
            this.weekdata = []
            this.x_data = this.week
            this.y_data = this.weekdata
            this.list_fun()     
        }
    },
     mGetDate(){  //获取当月天数
       var now=new Date();
       var d = new Date(now.getFullYear(),now.getMonth()+1,0);
       var days=d.getDate();
       for(let i=1 ; i<=days;i++){
            this.month.push(i)
       }
       
    },
 
    myEcharts(){
         let than = this
		  // 基于准备好的dom，初始化echarts实例
		  var myChart = this.$echarts.init(document.getElementById('main1'));

		  // 指定图表的配置项和数据
		  var option = {
                    title: {
                        text: ''
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#0ACD5E'
                            }
                        }
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: than.x_data
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [           
                        {
                            name: '预约数',
                            type: 'line',
                            stack: '总量',
                            smooth: true,
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top'
                                }
                            },
                            areaStyle: {
                                normal: {
                                    color: '#E1F5EA' //改变区域颜色
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: '#0ACD5E', //改变折线点的颜色
                                    lineStyle: {
                                        color: '#0ACD5E' //改变折线颜色
                                    }
                                }
			                },
                            data: than.y_data
                        }
                    ]
		  };

		  // 使用刚指定的配置项和数据显示图表。
		   myChart.setOption(option);
          },
          box_left_but(maid,index){
              this.box_left_id = index
              this.my_maid = maid
              
            if(this.type == 1){
                this.monthdata = []
                this.x_data = this.month
                this.y_data = this.monthdata
                this.list_fun()     
            }else if(this.type == 2){
                this.weekdata = []
                this.x_data = this.week
                this.y_data = this.weekdata
                this.list_fun()     
            }
        
          },
          go_but(){
            this.$router.push({
                path: '/index/operationdata/population/detailsEcharts2',
                query: {
                    name:'预约情况',
                }
            })
          }


  }
}
</script>


<style scoped>
.con{
   padding:15px;
}
.top{
    display: flex;
}
.top_item{
    
    display: flex;
    align-items: center;
}
.top_img{
    width: 30px;
    height: 30px;
    margin-right: 10px;
}
.top_item_but{
    margin-left: 10px;
    height: 28px;
    line-height: 28px;
    width: 60px;
    text-align: center;
    font-size: 12px;
    border-radius:3px;
    color:#0ACD5E;   
    background: #E1F5EA;
    box-shadow: 0px 4px 9px 0px rgba(77, 254, 81, 0.5);
     cursor: pointer;
}
.active1{
    background: #0ACD5E;
    color:white;
}
.box{
    padding: 10px;
    border-radius: 10px;    
    box-shadow: 0px 4px 9px 0px rgba(254, 206, 77, 0.1);
    margin-top: 20px;
    position: relative;
    padding-left:80px;
}
.box_left{
    widows:80px;
    position: absolute;
    left: 5px;
    top: 80px;
}
.box_left_item{
    margin-top:15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size:14px;
    padding:2px 8px;
    cursor: pointer;
}
.box_left_item_img{
    margin-right: 5px;
    width:20px;
    height: 20px;
}
.box_left_active{
    background: #F3F3F6;
     border-radius: 5px;   
}
.see_but{
    width: 90px;
    height: 30px;
    background: #B3C0D1;
    border-radius: 18px;
    text-align: center;
    line-height: 30px;
    color:white;
    font-size: 14px;
    cursor: pointer;
}
</style>